<!DOCTYPE html>
<html>
<head>
	<title>系统设置</title>
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta charset="utf-8">
	<link rel="stylesheet" href="../static/css/main.css">
	<script src="../static/js/vue.js"></script>
	<script src="../static/js/axios.js"></script>
	<script src="../static/js/uuid.js"></script>
	<script src="../static/js/v-avatar-2.0.3.min.js"></script>
  <script src="../static/js/main.js"></script>
</head>
<body>
	<div class="app user setting" id="app">
		<div class="bg">
      <img src="../static/images/form_bg.png">
    </div>
		<img class="back" @click="quit" src="../static/images/user_back.png" alt="">
    <div class="form">
      <div class="item avatar">
        <span class="title">头像</span>
        <span class="goto">&gt;</span>
        <span class="value" @click="update_avatar">
						<v-avatar v-if="user_info.avatar" :src="user_info.avatar" :size="55" :rounded="true"></v-avatar>
						<v-avatar v-else-if="user_info.nickname" :username="user_info.nickname" :size="55" :rounded="true"></v-avatar>
						<v-avatar v-else :username="user_info.id" :size="55" :rounded="true"></v-avatar>
        </span>
      </div>
      <div class="item" @click="updata_nickname">
        <span class="title">昵称</span>
        <span class="goto">&gt;</span>
        <span class="value">{{user_info.nickname}}</span>
      </div>
      <div class="item" @click="update_bind_mobile">
        <span class="title">手机号</span>
        <span class="goto">&gt;</span>
        <span class="value">{{user_info.mobile}}</span>
      </div>
      <div class="item" @click="update_password_frame">
        <span class="title">登陆密码</span>
        <span class="value"></span>
        <span class="goto">&gt;</span>
      </div>
      <div class="item" @click="update_transation_password">
        <span class="title">交易密码</span>
        <span class="value"></span>
        <span class="goto">&gt;</span>
      </div>
      <div class="item" @click="address_manage">
        <span class="title">地址管理</span>
        <span class="value"></span>
        <span class="goto">&gt;</span>
      </div>
      <div class="item" @click="device_manage">
        <span class="title">设备管理</span>
        <span class="value"></span>
        <span class="goto">&gt;</span>
      </div>
      <div class="item logout">
        <img @click="change_account" src="../static/images/change_account.png" alt="">
        <p @click="logout">退出账号</p>
      </div>
    </div>
	</div>
	<script>
	apiready = function(){
    var game = new Game("../static/mp3/bg1.mp3");
    // 在 #app 标签下渲染一个按钮组件
    Vue.prototype.game = game;
		new Vue({
			el:"#app",
			data(){
				return {
					prev:{name:"",url:"",params:{}},
					user_info:{},
					token:{},
					current:{name:"setting",url: "setting.html",params:{}},
				}
			},
			mounted(){
				this.token = this.game.getdata("access_token") || this.game.getfs("access_token");
				this.user_info = this.game.get_user_data(this.token).sub;
				this.listener();
			},
			methods:{
        quit(){
					//
          this.game.closeFrame();
        },
        change_account(){
          // 切换账号
          this.game.openWin("login","login.html"); // 打开登陆窗口
					this.game.closeWin(); // 退出当前窗口
        },
        logout(){
          // 退出账号
          api.actionSheet({
              title: '您确认要退出当前登录吗？',
              cancelTitle: '取消',  // 取消按钮，buttonIndex=最后一个值
							destructiveTitle: "退出登录", // 默认按钮，会自动高亮显示buttonIndex=1
              buttons: ['再考虑1下','再考虑2下'] // buttonIndex=2
          }, (ret, err)=>{
              if( ret ){
                  // this.game.print(ret,1);
                   if(ret.buttonIndex==1){
                     this.game.deldata(["access_token","refresh_token"]);
                     this.game.delfs(["access_token","refresh_token"]);
                     this.game.closeWin();
                   }
              }
          });

        },
				update_avatar(){
					// 更新头像
					this.game.openFrame("avatar","avatar.html","from_top");
				},
				listener(){
					//全局事件监听方法
					this.upload_user_data_listener();	//监听是否更新了用户信息
				},
				upload_user_data_listener(){
					// 更新用户信息的监听事件
					api.addEventListener({
							name: 'upload_access_token',
					}, (ret, err)=>{
							let access_token = this.game.getdata("access_token") || this.game.getfs("access_token");
							this.user_info = this.game.get_user_data(access_token).sub;
					});
				},
				updata_nickname(){
					//修改昵称
				this.game.openFrame("nickname","nickname.html","from_top");

				},
				update_bind_mobile(){
					//更新绑定手机号

				},
				update_password_frame(){
					//更新登录密码
					this.game.openFrame("password","password.html","from_top");

				},
				update_transation_password(){
					//更新交易密码
					this.game.openFrame("password","transation_password.html","from_top");

				},
				address_manage(){
					//地址管理

				},
				device_manage(){
					//设备管理

				},
			}
		});
	}
	</script>
</body>
</html>
